<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Gomokult</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.css" rel="stylesheet">
  <style>
    html {
      user-select: none;
      height: 100%;
      background-color: #222;
    }
    body {
      margin: 0px;
      height: 100%;
    }

    .background-wrapper {
      position: fixed;
      z-index: -1;
      top: -1000px;
      left: -300px;
      opacity: 0;
      animation: background-reveal 1s linear forwards;
    }
    @keyframes background-reveal {
      0% { opacity: 0; }
      100% { opacity: 0.15; }
    }
    .background-pattern {
      font-size: 50px;
      white-space: nowrap;
      line-height: 115px;
      filter: drop-shadow(black 0px 0px 4px);
      transform-origin: center center;
      animation: background-rotate 120s infinite linear;
    }
    @keyframes background-rotate {
      0% { transform: rotate(0); }
      100% { transform: rotate(360deg); }
    }

    div.header-menu {
      display: flex;
      justify-content: right;
      align-items: center;
      width: 100%;
      height: 100px;
      background: linear-gradient(#000B, #0000);
      position: fixed;
      top: 0px;
      z-index: 1;
    }
    .header-menu-item {
      filter: drop-shadow(#FFFA 0px 0px 7px);
      margin: -20px 30px 0px 10px;
      color: #FFF8;
      font-size: 25px;
      font-family: "Segoe MDL2 Assets";
      text-decoration: none;
      cursor: pointer;
    }
    div.cascade-menu {
      width: 100px;
      height: 100px;
      background-color: black;
      position: absolute;

    }

    .main-menu {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .main-title {
      font-size: 150px;
      font-weight: bold;
      font-family: "Century Gothic";
    }
    .white-title {
      color: white;
      filter: drop-shadow(white 0px 0px 10px);
    }
    .blue-title {
      color: #9CF;
      filter: drop-shadow(#9CF 0px 0px 10px);
    }
    .red-title {
      color: #F99;
      filter: drop-shadow(#F99 0px 0px 10px);
    }
    .main-menu-item {
      cursor: pointer;
      margin: 5px 0px;
      color: #EEE;
      font-weight: bold;
      font-size: 50px;
      text-decoration: none;
      filter: drop-shadow(#FFFA 0px 0px 7px);
    }
    .main-menu-item-pressed { animation: main-menu-item-press 0.25s ease-in-out; }
    @keyframes main-menu-item-press {
      33% { transform: scale(0.8, 0.8); }
      66% { transform: scale(1.1, 1.1); }
      100% { transform: scale(1, 1); }
    }

    .main-menu-item-head {
      transition: transform 0.07s linear;
      transform: translate(-50px, 0px) scale(0, 1);
    }
    .main-menu-item:hover .main-menu-item-head { transform: translate(0px, 0px) scale(1, 1); }
    .main-menu-item-tail { transition: transform 0.07s linear; }
    .main-menu-item:hover .main-menu-item-tail { transform: translate(50px, 0px) scale(0, 1); }

    .popup-panel {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #0008;
      backdrop-filter: blur(20px);
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      z-index: 3;
      visibility: hidden;
    }
    .popup-panel-showing { animation: popup-panel-reveal 0.1s linear forwards; }
    @keyframes popup-panel-reveal {
      0% {
        opacity: 0;
        visibility: visible;
      }
      100% {
        opacity: 1;
        visibility: visible;
      }
    }
    .popup-panel-hiding { animation: popup-panel-hide 0.1s linear forwards; }
    @keyframes popup-panel-hide {
      0% {
        visibility: visible;
        opacity: 1;
      }
      99% {
        visibility: visible;
        opacity: 0;
      }
      100% {
        visibility: hidden;
        opacity: 0;
      }
    }
    .login-panel {
      display: flex;
      background: #FFF2;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      position: fixed;
      width: 330px;
      height: 330px;
      backdrop-filter: blur(8px);
      background: linear-gradient(45deg, #FFF2, #FFF1);
      filter: drop-shadow(#FFF2 0px 0px 10px);
      border: 1px solid #FFF2;
      border-radius: 10px;
    }
    .login-panel-button {
      color: #FFF4;
      cursor: pointer;
    }
    .login-panel-button:hover { color: #FFF7; }
    .login-panel-title {
      font-weight: lighter;
      font-size: 24px;
      color: #EEE;
      filter: drop-shadow(#FFF8 0px 0px 10px);
    }
    .text-input {
      font-size: 16px;
      text-align: justify;
      font-weight: lighter;
      font-family: inherit;
      resize: none;
      padding: 10px;
      color: #FFF8;
      max-lines: 14;
      background: #1115;
      outline: none;
      border: 1px solid #AAA4;
      box-shadow: inset #0001 0 0 40px;
      border-radius: 10px;
      height: 20px;
      width: 200px;
    }
    .hidden-text-input { animation: text-input-shrink 0.1s ease-out forwards; }
    @keyframes text-input-shrink {
      0% {
        height: 20px;
        transform: scale(1, 1);
        margin: 0px 0px;
      }
      100% {
        height: 0px;
        transform: scale(1, 0);
        margin: -25px 0px;
      }
    }
    .visible-text-input { animation: text-input-expand 0.1s ease-in forwards; }
    @keyframes text-input-expand {
      0% {
        height: 0px;
        transform: scale(1, 0);
        margin: -25px 0px;
      }
      100% {
        height: 20px;
        transform: scale(1, 1);
        margin: 0px 0px;
      }
    }

    .popup-button {
      background-color: transparent;
      background: linear-gradient(135deg, #FFF1, #FFF3);
      color: #FFFA;
      outline: none;
      border: 1px solid #FFF2;
      border-radius: 8px;
      margin-bottom: 10px;
      width: 98px;
      height: 35px;
    }
    .popup-button:hover { background: linear-gradient(135deg, #FFF2, #FFF4); }
    .popup-button:active { background: linear-gradient(135deg, #FFF1, #FFF2); }

    .login-options {
      color: #888;
      display: flex;
      width: 223px;
      justify-content: space-between;
    }

    .popup-checkbox {
      background-color: #222;
      border: #8885 1px solid;
      border-radius: 4px;
      margin-right: 5px;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
    }
    .popup-checkbox:hover { filter: brightness(1.4); }
    .popup-checkbox-checked { background-color: #59D; }
    .popup-checkbox-checked::after {
      content: "√";
      color: #FFF;
      font-family: serif;
      font-weight: bold;
      font-size: 20px;
      margin-left: -1.5px;
      margin-top: 2px;
    }
    .clickable-text:hover { color: #BBB; }
  </style>
</head>
<body>
<div class="background-wrapper">
  <div class="background-pattern">
    <script>
      for (let i = 0; i < 29; ++i) {
        for (let j = 0; j < 11; ++j)
          document.write(i & 1 ? "🧔　🤶　" : "🐷　🐕　");
        document.write("<br/>");
      }
    </script>
  </div>
</div>

<div class="header-menu">
  <a class="header-menu-item" title="个人主页" id="UserButton"><i class='fa-solid fa-user fa-lg' style='color: white'></i></a>
  <a class="header-menu-item" title="复制分享链接" id="ShareButton"><i class='fa-solid fa-paper-plane fa-lg' style='color: white'></i></a>
  <a class="header-menu-item" title="退出登录" id="LogoutButton"><i class='fa-solid fa-right-from-bracket fa-lg' style='color: white'></i></a>
</div>

<div class="main-menu">
  <div class="main-title"><span class="white-title">G</span><span class="blue-title"></span><span class="white-title">A</span><span class="red-title">M</span><span class="white-title">E</span></div>
  <a id="MatchingButton" class="main-menu-item">
    <div class='main-menu-item-head fa-solid fa-caret-right fa-lg' style='color:white'></div>
    匹配对局
    <div class='main-menu-item-tail fa-solid fa-caret-right fa-lg' style='color:white'></div>
  </a>
  <a id="GalleryButton" class="main-menu-item">
    <div class='main-menu-item-head fa-solid fa-caret-right fa-lg' style='color:white'></div>
    对局展厅
    <div class='main-menu-item-tail fa-solid fa-caret-right fa-lg' style='color:white'></div>
  </a>
  <a id="SelfOnlyButton" class="main-menu-item">
    <div class='main-menu-item-head fa-solid fa-caret-right fa-lg' style='color:white'></div>
    我的对局
    <div class='main-menu-item-tail fa-solid fa-caret-right fa-lg' style='color:white'></div>
  </a>
</div>

<div class="popup-panel">
  <div class="login-panel">
    <div style="display: flex; margin: 30px 0px 15px 0px;">
      <div class="login-panel-title" style="font-size: 24px; font-weight: bold; margin: 0px 55px 0px 100px;">用户登陆</div>
      <div class="login-panel-button fa-solid fa-xmark fa-2x" id="CloseLoginPanelButton" style="visibility: inherit; margin: -10px 20px 0px 0px;"></div>
    </div>
    <input class="text-input title-editor" id="EmailBox" spellcheck="false" placeholder="输入邮箱"/>
    <input class="text-input title-editor hidden-text-input" id="NicknameBox" spellcheck="false" placeholder="输入用户名"/>
    <input class="text-input title-editor" id="PasswordBox" type="password" placeholder="输入密码"/>
    <div class="login-options">
      <div class="clickable-text" id="RegisterSwitch">用户注册</div>
      <div style="display: flex;"><div class="popup-checkbox" id="AutoLoginCheckBox" title="记住该账户14天"></div>自动登录</div>
    </div>
    <div class="login-panel-title" id="LoginErrorLabel" style="font-size: 13px; align-self: self-start; margin: -5px 60px; color: #FAA;">&ensp;</div>
    <input class="popup-button" id="LoginButton" type="button" value="登录"/>
  </div>
</div>

<script>
  ShareButton.onclick = () => {
    navigator.clipboard.writeText(this.location.href);
    let SelectedItem = $("#ShareButton");
    SelectedItem.addClass("main-menu-item-pressed");
    setTimeout(() => { SelectedItem.removeClass("main-menu-item-pressed"); }, 250);
  };

  UserButton.onclick = () => {
    if (sessionStorage.getItem("CurrentUser") === null) {
      $(".popup-panel").removeClass("popup-panel-hiding");
      $(".popup-panel").addClass("popup-panel-showing");
    }
    else
      window.location = `user_space.html?user_id=${sessionStorage.getItem("CurrentUser")}`;
  };
  CloseLoginPanelButton.onclick = () => {
    $(".popup-panel").removeClass("popup-panel-showing");
    $(".popup-panel").addClass("popup-panel-hiding");
    LoginErrorLabel.innerHTML = "&ensp;";
  };
  RegisterSwitch.onclick = () => {
    let SelectedItem = $("#NicknameBox");
    RegisterSwitch.innerHTML = SelectedItem.hasClass("hidden-text-input") ? "用户登录" : "用户注册";
    LoginButton.value = SelectedItem.hasClass("hidden-text-input") ? "注册登录" : "登录";
    SelectedItem.toggleClass("hidden-text-input");
    SelectedItem.toggleClass("visible-text-input");
  };
  AutoLoginCheckBox.onclick = () => { $("#AutoLoginCheckBox").toggleClass("popup-checkbox-checked"); };

  function TryUserLogin() {
    let Password = PasswordBox.value.replaceAll(/[=;]/g, "");
    $.post("/Gomokult_war_exploded/servlet/LoginVerifyServlet", {
      email: EmailBox.value,
      password: Password
    }, (feedback) => {
      let result = feedback.split("#");
      LoginErrorLabel.innerHTML = result[0];
      if (parseInt(result[1]) >= 0) {
        LoginErrorLabel.innerHTML = "&ensp;";
        sessionStorage.setItem("CurrentUser", parseInt(result[1]));
        sessionStorage.setItem("CurrentEmail", EmailBox.value);
        if ($("#AutoLoginCheckBox").hasClass("popup-checkbox-checked")) {
          let Now = new Date();
          Now.setHours(Now.getHours() + 24 * 14);
          document.cookie = `GomokultEmail="${EmailBox.value}"; expires=${Now.toUTCString()}`;
          document.cookie = `GomokultPassword="${PasswordBox.value}"; expires=${Now.toUTCString()}`;
        }
        CloseLoginPanelButton.onclick();
      }
    });
  }
  LoginButton.onclick = () => {
    if (!/\w+@\w+(\.\w+){1,2}/.test(EmailBox.value)) {
      LoginErrorLabel.innerHTML = "⚠ 邮箱格式不正确";
      return;
    }

    if (LoginButton.value == "注册登录") {
      if (NicknameBox.value.length < 4 || NicknameBox.value.length > 16) {
        LoginErrorLabel.innerHTML = "⚠ 请输入4-16位用户名";
        return;
      }
      if (PasswordBox.value.length < 4 || PasswordBox.value.length > 16) {
        LoginErrorLabel.innerHTML = "⚠ 请输入4-16位密码";
        return;
      }
      let Password = PasswordBox.value.replaceAll(/[=;]/g, "");

      $.post("/Gomokult_war_exploded/servlet/RegisterUserServlet", {
        email: EmailBox.value,
        nickname: NicknameBox.value,
        password: Password
      }, (message) => {
        LoginErrorLabel.innerHTML = message;
        if (/^\s*$/.test(message))
          TryUserLogin();
      });
    }
    else
      TryUserLogin();
  };

  LogoutButton.onclick = () => {
    let SelectedItem = $("#LogoutButton");
    SelectedItem.addClass("main-menu-item-pressed");
    setTimeout(() => { SelectedItem.removeClass("main-menu-item-pressed"); }, 250);
    document.cookie = `GomokultEmail=""; expires=${new Date().toUTCString()}`;
    document.cookie = `GomokultPassword=""; expires=${new Date().toUTCString()}`;
    sessionStorage.removeItem("CurrentUser");
    sessionStorage.removeItem("CurrentEmail");
  };

  MatchingButton.onclick = () => {
    if (sessionStorage.getItem("CurrentUser") === null)
      UserButton.onclick();
    else
      window.location = "matching.html";
  };
  GalleryButton.onclick = () => {
    if (sessionStorage.getItem("CurrentUser") === null)
      UserButton.onclick();
    else
      window.location = "games_gallery.html";
  };
  SelfOnlyButton.onclick = () => {
    if (sessionStorage.getItem("CurrentUser") === null)
      UserButton.onclick();
    else
      window.location = `games_gallery.html?self-only=1`;
  };

  (function TryLogin() {
    let Email = null, Password = null;
    for (let Token of document.cookie.split(";"))
      if (Token.includes("GomokultEmail="))
        Email = Token.split("=")[1].slice(1, -1);
      else if (Token.includes("GomokultPassword="))
        Password = Token.split("=")[1].slice(1, -1);
    if (Email != null && !Password != null) {
      $.post("/Gomokult_war_exploded/servlet/LoginVerifyServlet", {
        email: Email,
        password: Password
      }, (message) => {
        result = message.split("#");
        if (parseInt(result[1]) >= 0) {
          sessionStorage.setItem("CurrentUser", parseInt(result[1]));
          sessionStorage.setItem("CurrentEmail", Email);
        }
      });
    }
  })();
</script>
</body>
</html>